<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <child-com ref="childCom" :childData="parentData" @parentCallBack="childComCallBack"></child-com>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>我是Index el-card</span>
                        </div>
                        <div class="text item">
                            <el-button type="primary" @click="clickChildMethod('我来自index,调用ChildCom组件 childMethod方法')">
                                调用ChildCom 方法
                            </el-button>
                            <el-button type="primary" @click="editData('我修改 index parentData 数据')">修改数据</el-button>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>我是Index 上传七牛</span>
                        </div>
                        <div class="text item">
                            <el-button type="primary" @click="upFileQiniu">获取七牛站点信息</el-button>
                            <div v-html="html" style="width:100%;max-height:250px; overflow-y:auto; overflow-x:hidden;">
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import childCom from './components/childCom.vue'
import qinius from '@/api/qinius'
export default ({
    name: 'homePage',
    components: { childCom },
    data() {
        return {
            parentData: "我来自index 的数据",
            html: ""
        }
    },
    methods: {
        childComCallBack(msg) {
            this.$message(msg)
            console.log('index-childComCallBack', msg)
        },
        clickChildMethod(msg) {
            this.$refs.childCom.childMethod(msg);
        },
        editData(val) {
            this.parentData = val;
        },
        //请求其它Api
        upFileQiniu() {
            qinius.get().then(res => {
                this.html = res.data
                console.log(res);
            })
        }
    }
})
</script>
